<template>
  <div id="cesiumContainer"></div>
</template>

<script>

export default {
  name: 'ParticleSystemSmoke',
  mounted() {
    let viewer = this.initCesium();

    this.addParticleSystemSmoke(viewer);
  },
  methods: {
    initCesium: function () {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8';
      let viewer = new Cesium.Viewer('cesiumContainer', {
        animation: true,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false,//是否显示选取指示器组件
        shouldAnimate: true,     //自动播放动画控件
        shadows: true,//是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
        }),
        terrainProvider: new Cesium.EllipsoidTerrainProvider()
      });
      viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
      return viewer;
    },
    addParticleSystemSmoke(viewer) {

      viewer.entities.add({
        name: "Wedge",
        position: Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
        orientation: Cesium.Transforms.headingPitchRollQuaternion(
          Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 20000.0),
          new Cesium.HeadingPitchRoll(Cesium.Math.PI / 1.5, 0, 0.0)
        ),
        model: {
          uri: "http://localhost:8888/model/SampleData/models/CesiumAir/Cesium_Air.glb",
          minimumPixelSize: 64
        },
        ellipsoid: {
          radii: new Cesium.Cartesian3(5000.0, 5000.0, 5000.0),
          innerRadii: new Cesium.Cartesian3(10.0, 10.0, 10.0),
          minimumClock: Cesium.Math.toRadians(-15.0),
          maximumClock: Cesium.Math.toRadians(15.0),
          minimumCone: Cesium.Math.toRadians(75.0),
          maximumCone: Cesium.Math.toRadians(105.0),
          material: Cesium.Color.DARKCYAN.withAlpha(0.3),
          outline: true
        }

      });

      viewer.zoomTo(viewer.entities);
    }
  }
}
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
